<template>
  <div style="height: 100%; width: 100%; height: 100%; background-color: #061723">
    <div class="maintenance-conteiner">
      <div class="maintenance-l">
        <div class="maintenance-l-top">
          <div class="maintenance-header-title childpage-logo-title">
            <i class="iconfont icon_biaotijiantou" @click="$Ctl.backProvePage()"></i>
            <span class="page-title-text" style="font-size: 25px">维保完成时间线</span>
          </div>
          <el-select v-model="orgIds" filterable placeholder="请选择" @change="getData()">
            <!-- <el-option label="所有单位" :value="selectOrgIds"></el-option> -->
            <el-option v-for="item in InspectionSelects" :key="item.orgId" :label="item.orgName" :value="String(item.orgId)"></el-option>
          </el-select>
        </div>
        <div class="maintenance-l-bottom">
          <LineEcharts :domStyle="domStyle" :lineData="lineData" />
        </div>
      </div>
      <div class="maintenance-r">
        <div class="maintenance-r-top">
          <i class="iconyoujiantou iconfont" @click="dateDel"></i>
          <span class="dateText">{{ dateYear }}年</span>
          <i class="iconzuojiantou iconfont" @click="dateAdd"></i>
          <ul class="date-tab-items">
            <li
              v-for="(item, index) in dateArr"
              :key="index"
              @click="
                index > currentMonth - 1 && dateYear === currentYear
                  ? null
                  : ((dateMonth = index + 1), getData())
              "
              :class="[
                index > currentMonth - 1 && dateYear === currentYear
                  ? ''
                  : 'canClick',
                dateMonth - 1 == index ? 'activeDate' : '',
              ]"
            >{{ item.value }}</li>
          </ul>
        </div>
        <div class="maintenance-r-bottom">
          <h3>
            <span>{{ dateYear }}年</span>
            <span>{{ dateMonth }}月</span>维保任务完成照片墙
          </h3>
          <div class="maintenance-r-bottom-container">
            <div class="maintenance-r-bottom-l" v-show="originalData.length !== 0">
              <el-image
                style="width: 100%; height: 70%; cursor: pointer;"
                :src="dataDetails.images"
                fit="cover"
                @click="getImgVideoDetail({ item: dataDetails.pic })"
              >
                <div slot="error" class="image-slot">
                  <el-image :src="noimg" fit="contain"></el-image>
                </div>
              </el-image>
              <div class="maintenance-r-bottom-l-text">
                <ul>
                  <li>
                    <span class="update-time">
                      {{ dataDetails.maintain_account_name }}上传于{{
                      dataDetails.update_time
                      }}
                    </span>
                    <span class="work-status">
                      {{
                      dataDetails.flag == 1 ? "作业前" : "作业后"
                      }}
                    </span>
                  </li>
                  <li>
                    <span>作业对象</span>
                    <span>{{ workObject }}</span>
                  </li>
                  <li>
                    <span>所属任务</span>
                    <span>{{ dataDetails.name }}</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="maintenance-r-bottom-r">
              <div v-show="originalData.length === 0" style="width: 100%; height: 100%; text-align: center">
                <div slot="error" class="image-slot">
                  <el-image :src="noimg" fit="contain"></el-image>
                </div>
              </div>
              <div v-show="originalData.length !== 0" ref="listContent" class="list-pic">
                <ul v-infinite-scroll="getPhotos" :infinite-scroll-disabled="isOver" infinite-scroll-distance="10">
                  <el-image
                    :src="item.images"
                    fit="cover"
                    :class="['content-item', check === index ? 'checked' : '']"
                    v-for="(item, index) in picDataObj"
                    :key="index"
                    @click="lookDetail(item, index)"
                  >
                    <div slot="error" :class="['image-slot', item.showDate ? 'date' : '']">
                      <span class="err-text">{{ item.showDate }}</span>
                    </div>
                    <div slot="placeholder" class="image-slot">
                      <span class="err-text">{{ item.showDate }}</span>
                    </div>
                  </el-image>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="30vw" class="hereby-certify" append-to-body :title="workObject">
      <videoImgDetail :videoImgArr="videoImgArr" ref="mychild" style="width: 100%"></videoImgDetail>
    </el-dialog>
  </div>
</template>
<script>
import LineEcharts from './LineEcharts'
import videoImgDetail from '@/components/DialogCards/videoImgDetail/main'
import {
  getPhotoWall,
  getObjectDetail,
  getMaintainTaskTrendForMonth,
} from '@/api/maintenance'
import { getOrgsStatusList } from '@/api/organization'
export default {
  name: 'MaintenanceTimeLine',
  data() {
    return {
      InspectionSelects: [],
      orgIds: '-1',
      check: 1,
      domStyle: {
        width: '100%',
        height: '100%',
      },
      noimg: require('../../../../assets/images/default/nodata.png'),
      videoImg: require('../../../../assets/images/videoImgDetail/video_detail.png'),
      currentYear: new Date().getFullYear(),
      dateYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth() + 1,
      dateMonth: new Date().getMonth() + 1,
      dateArr: [
        {
          value: '一月',
        },
        {
          value: '二 月',
        },
        {
          value: '三月',
        },
        {
          value: '四月',
        },
        {
          value: '五月',
        },
        {
          value: '六月',
        },
        {
          value: '七月',
        },
        {
          value: '八月',
        },
        {
          value: '九月',
        },
        {
          value: '十月',
        },
        {
          value: '十一月',
        },
        {
          value: '十二月',
        },
      ],
      //selectOrgIds: "-1",
      lineData: [],
      picDataObj: {},
      originalData: [], // 从server拿到的数据源
      pageIndex: -1,
      pageSize: 30,
      isOver: false,
      dataDetails: {},
      workObject: '',
      dialogVisible: false, // 弹窗
      videoImgArr: {},
    }
  },
  props: ['parames'],
  components: {
    LineEcharts,
    videoImgDetail,
  },
  watch: {
    dialogVisible(newVal) {
      if (!newVal) {
        this.$refs.mychild.stopVideo()
      }
    },
  },
  mounted() {
    this.getOrgsStatusList()
  },
  methods: {
    getData() {
      this.getPhotos(0)
      this.drawLineChart()
    },
    //获取下拉选择
    getOrgsStatusList() {
      let that = this
      getOrgsStatusList({
        orgIds: that.$store.state.userInfo.organizationIds,
        year: that.dateYear,
        month: that.dateMonth,
      }).then((res) => {
        if (res.status == 200) {
          that.InspectionSelects = res.data.orgDetail
          if (
            String(that.parames.orgId).split(',').length > 1 ||
            that.parames.orgId == '-1'
          ) {
            that.orgIds = String(res.data.orgDetail[0].orgId)
          } else {
            that.orgIds = String(that.parames.orgId)
          }
          that.getData()
        }
      })
    },
    // 查看视频图片详情
    getImgVideoDetail(item) {
      let that = this
      that.videoImgArr = item
      that.dialogVisible = true
    },
    // 照片墻-分页
    getPhotos(_pageIndex) {
      let that = this
      if (that.orgIds == -1) return
      if (_pageIndex === 0) {
        that.$refs.listContent ? (that.$refs.listContent.scrollTop = 0) : ''
        that.isOver = false
        that.pageIndex = 0
      }
      if (that.isOver) return
      that.$Ctl.loading(1, 10000)
      getPhotoWall({
        orgIds: that.orgIds,
        year: that.dateYear,
        month: that.dateMonth,
        pageType: 1,
        pageIndex: that.pageIndex,
        pageSize: that.pageSize,
      }).then((res) => {
        if (that.pageIndex === 0) {
          that.originalData = res.data
        } else {
          that.originalData.push.apply(that.originalData, res.data)
        }

        // 最后一页停止滚动加载
        if (res.data.length < that.pageSize) {
          that.isOver = true
        } else {
          that.isOver = false
          that.pageIndex += 1
        }

        that.$Ctl.loading(0)
        if (that.originalData.length === 0) return

        //数据格式化
        that.picDataObj = {}
        let flat = []
        let setTime = ''
        that.originalData.forEach((item) => {
          if (setTime != that.transDate(item.update_time)) {
            setTime = that.transDate(item.update_time)
            flat.push({
              showDate: setTime,
            })
          }
          flat.push(item)
        })
        // 把格子填满
        const flatLength = flat.length
        if (window.screen.width < 3800) {
          if (flatLength < 9) {
            flat = flat.concat(new Array(9 - flatLength).fill({}))
          } else if (flatLength > 9) {
            const mod = Math.floor(flatLength / 3)
            const max = (mod + 1) * 3
            flat = flat.concat(new Array(max - flatLength).fill({}))
          }
        } else {
          if (flatLength < 18) {
            flat = flat.concat(new Array(18 - flatLength).fill({}))
          } else if (flatLength > 18) {
            const mod = Math.floor(flatLength / 6)
            const max = (mod + 1) * 6
            flat = flat.concat(new Array(max - flatLength).fill({}))
          }
        }
        that.picDataObj = flat
        that.picDataObj[1] && that.lookDetail(that.picDataObj[1], 1)
        for (let i in that.picDataObj) {
          if (that.picDataObj[i].pic) {
            if (
              that.picDataObj[i].pic.substring(
                that.picDataObj[i].pic.length - 3
              ) == 'png' ||
              that.picDataObj[i].pic.substring(
                that.picDataObj[i].pic.length - 4
              ) == 'jpeg' ||
              that.picDataObj[i].pic.substring(
                that.picDataObj[i].pic.length - 3
              ) == 'gif' ||
              that.picDataObj[i].pic.substring(
                that.picDataObj[i].pic.length - 3
              ) == 'jpg' ||
              that.picDataObj[i].pic.substring(
                that.picDataObj[i].pic.length - 3
              ) == 'bmp' ||
              that.picDataObj[i].pic.substring(
                that.picDataObj[i].pic.length - 3
              ) == 'pic'
            ) {
              that.$set(that.picDataObj[i], 'images', that.picDataObj[i].pic)
            } else {
              that.$set(that.picDataObj[i], 'images', that.videoImg)
            }
          }
        }
      })
    },
    //查看详情
    lookDetail(item, index) {
      if (item.pic === '') {
        return false
      }
      this.check = index
      this.dataDetails = item
      getObjectDetail({
        id: item.id,
      }).then((res) => {
        if (res.status == 200 && res.data) {
          this.workObject = res.data.workObject || ''
        } else {
          this.workObject = ''
        }
      })
    },
    //折线图
    drawLineChart() {
      getMaintainTaskTrendForMonth({
        orgIds: this.orgIds,
        year: this.dateYear,
        month: this.dateMonth,
      }).then((res) => {
        if (res.status == 200) {
          this.lineData = res.data
        }
      })
    },
    // "2020-07-09 15:05:50" => 7月8日
    transDate(ymd) {
      const t = new Date(ymd)
      return `${t.getMonth() + 1}月${t.getDate()}日`
    },
    dateDel() {
      this.dateYear--
      this.getData()
    },
    dateAdd() {
      if (this.dateYear >= this.currentYear) {
        return false
      } else {
        this.dateYear++
        // 当前选中的月份有可能超过当前月份
        if (this.dateMonth > this.currentMonth) {
          this.dateMonth = this.currentMonth
        }
        this.getData()
      }
    },
  },
}
</script>
<style lang="scss">
.maintenance-conteiner {
  background-color: #061723;
  height: calc(100% - 80px);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  .maintenance-l {
    width: 35%;
    height: 100%;
    padding: 0 40px;
    .maintenance-l-bottom {
      border: 1px solid #5eb8f7;
      padding: 40px 40px;
      width: 100%;
      height: calc(100% - 90px);
    }
    .maintenance-l-top {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .maintenance-header-title {
      span {
        margin-right: 20px;
      }
    }
  }
  .maintenance-r {
    width: 65%;
    height: 100%;
    padding: 0 40px 0 0;
    .maintenance-r-top {
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .iconzuojiantou,
      .iconyoujiantou {
        color: #2680e4;
        cursor: pointer;
        font-size: 90px;
      }
      .dateText {
        color: #ffffff;
        display: inline-block;
        height: 100%;
        line-height: 90px;
        font-size: 40px;
      }
      .date-tab-items {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        color: #ffffff;
        flex: 1;
        li {
          flex: 1;
          text-align: center;
          margin-right: 10px;
          border-radius: 4px;
          background: rgba(255, 255, 255, 0.1);
          color: #ffffff;
          font-size: 1rem;
          cursor: default;
          &.activeDate {
            color: #60c2ff;
            box-shadow: 0px 0px 5px #60c2ff inset;
            cursor: pointer;
          }
          &.canClick {
            background: rgba(70, 153, 255, 0.2);
            color: #56a7d9;
            cursor: pointer;
          }
        }
      }
    }
    .maintenance-r-bottom {
      border: 1px solid #5eb8f7;
      padding: 40px 40px;
      width: 100%;
      height: calc(100% - 90px);
      h3 {
        color: #a3bedd;
        font-size: 28px;
      }
      .maintenance-r-bottom-container {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        padding-top: 25px;
        height: calc(100% - 40px);
        .maintenance-r-bottom-l {
          width: 38%;
          padding: 20px;
          margin-right: 20px;
          height: 100%;
          box-shadow: 0 0 10px #60c2ff;
          border: 1px solid #5eb8f7;
          .maintenance-r-bottom-l-text {
            margin-top: 10px;
            li {
              display: flex;
              align-items: flex-start;
              justify-content: space-between;
              color: #ffffff;
              font-size: 16px;
              margin-bottom: 15px;
              &:nth-child(1) {
                align-items: center;
              }
              &:nth-child(2),
              &:nth-child(3) {
                justify-content: flex-start;
                span {
                  &:nth-child(1) {
                    min-width: 70px;
                    display: inline-block;
                    text-align: right;
                    margin-right: 20px;
                    color: rgba(163, 190, 221, 1);
                  }
                }
              }
            }
            .work-status {
              display: inline-block;
              text-align: center;
              color: #ffffff;
              font-size: 18px;
              background: url(../../../../assets/images/detailPage/work-status.png)
                no-repeat;
              width: 180px;
              height: 63px;
              line-height: 63px;
              background-size: 100% 100%;
            }
            .update-time {
              color: #55abf3;
              font-size: 18px;
            }
          }
        }
        .maintenance-r-bottom-r {
          // background: url(../../../../assets/images/homeLeft/photowall.png)
          //   no-repeat;
          // background-size: 100% 100%;
          height: 100%;
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          align-items: flex-start;
          justify-content: flex-start;
          align-content: flex-start;
          overflow: auto;
          .list-pic {
            height: 100%;
            overflow-y: auto;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            margin-left: 10px;
          }
        }
      }
    }
    .content-item.el-image {
      width: 215px;
      height: 215px;
      margin-right: 5px;
      margin-bottom: 5px;
      box-sizing: border-box;
      // border: 3px solid transparent;
    }
    .content-item.el-image img {
      cursor: pointer;
    }
    .content-item.checked {
      border: 3px solid rgba(70, 153, 255, 1);
    }
    .image-slot {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background: rgba(163, 202, 250, 0.05);
      color: rgba(96, 194, 255, 1);
      .err-text {
        font-size: 0;
      }
    }
    .image-slot.date {
      background: rgba(59, 103, 150, 0.5);
      .err-text {
        color: rgba(96, 194, 255, 1);
        font-size: 24px;
        text-align: center;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
